<meta charset="utf-8">
<script src="../business/szyb/js/modelContrast.js"></script>
<div id="modelContrastMain">
    <div class="modelContrastMainContainer" v-show="isShow">
        <div class="subMenuWrap">
            <div class="conditionsWrap">
                <div>
                    <label>起报时间</label>
                    <div class="modelContrast-datepicker">
                        <div class="modelContrast-datePanel">
                            <input class="DateAgent" id="modelContrast-datePicker" data-options="{'format':'d-h', 'hType': 'H12'}" value="2019-10-22 08:00" />
                            <i class="btn-forward" @click="forward()"></i>
                            <i class="btn-backward" @click="backward()"></i>
                            <i class="btn-newest" @click="newest()"></i>
                        </div>
                    </div>

                </div>
                <div class="modelSelect jModel-y">
                    <label>模式</label>
                    <span id="jModel" sid="" :title="selectedModel.text">{{selectedModel.text}}</span>
                </div>
                <div>
                    <label>要素</label>
                    <select v-model="selectedEle" @change="changeEle()">
                        <option v-for="ele in eles" v-bind:value="ele.key" v-text="ele.name" ></option>
                    </select>
                </div>
                <div>
                    <label>区域选择</label>
                    <select v-model="selectArea" @change="changeArea()" v-bind:disabled="isDisable">
                        <option v-for="area in areas" v-bind:value="area.key" v-text="area.name" ></option>
                    </select>
                </div>
                <div class="forecastAging">
                    <label>预报时效</label>
                    <select @change="changeStartTime($event)" v-model="agings.selStart">
                        <option v-for="startTime in startTimeList" v-bind:value="startTime" v-text="startTime"></option>
                    </select> --
                    <select @change="changeEndTime($event)" id="modelContrastSelected" v-model="agings.selEnd">
                        <option v-for="endTime,index in endTimeList" v-bind:value="endTime" v-text="endTime"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="modelContrastContentWrap" id="modelContrastMapMain">
            <div class="conditionsWrap">
                <span v-text="title"></span>
            </div>
            <div class="resultWrap">
                <div class="leftResult" >
                    <div class="modelContrastMapWrap" @scroll="srcoll">
                        <div class="model_contrast_aging_empty_position"></div>
                        <div class="model_contrast_model_header">
                            <div class="model_contrast_aging_empty"></div>
                            <div v-for="(agingItem) in modelContrastAgings" class="model_contrast_model_header_item">{{agingItem.text}}</div>
                        </div>
                        <div class="model_contrast_model_body">
                            <div v-if="modelContrastList.length > 0" class="model_contrast_model_list">
                                <div v-for="modelContrastItem in modelContrastList" class="model_contrast_model_row">
                                    <div class="model_contrast_model_name">{{modelContrastItem.chinese}}</div>
                                    <template v-for="modelAging in modelContrastItem.agings">
                                        <div v-if="modelAging.url && modelAging.url !== 'null'" @click="opengBigImg(modelAging)" class="model_contrast_model_aging_item">
                                            <img :src="modelAging.url" />
                                        </div>
                                        <div v-else class="model_contrast_model_aging_item model_contrast_model_aging_item_nothing"></div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="model_contrast_model_body_position">
                            <div v-if="modelContrastList.length > 0" class="model_contrast_model_list">
                                <div v-for="modelContrastItem in modelContrastList" class="model_contrast_model_row">
                                    <div class="model_contrast_model_name">{{modelContrastItem.chinese}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightLegend">
                    <img :src="modelContrastMapLegend">
                </div>
            </div>
        </div>
    </div>
</div>
<link type="text/css" rel="stylesheet" href="../business/szyb/css/modelContrast.css">